<template>
  <div>
    <van-nav-bar
      :title="title"
      left-arrow
      left-text="返回"
      @click-left="$emit('close')"
    />
    <van-form ref="submitForm" @submit="doSubmit">
      <van-field
        readonly
        name="receiptNo"
        :value="submitForm.receiptNo"
        label="收款单号"
        placeholder="默认系统生成"
        input-align="left"
      />
      <van-field
        readonly
        clickable
        name="receiptDate"
        :value="submitForm.receiptDate"
        label="日期选择"
        placeholder="点击选择日期"
        input-align="left"
        :rules="[{ required: true, message: '请选择日期' }]"
        @click="showReceiptDate = true"
      />
      <van-field
        v-model="submitForm.customerName"
        readonly
        clickable
        name="customerName"
        label="客户名称"
        placeholder="点击选择客户"
        input-align="left"
        :rules="[{ required: true, message: '请选择客户' }]"
        @click="showCustomer=true"
      />
      <dict-select
        v-model="submitForm.receiptMethod"
        label="付款方式"
        dict-key="payment_method"
        @input="handleChangePaymentMethod"
      />
      <van-field
        v-model="submitForm.orderNo"
        readonly
        clickable
        name="orderNo"
        label="订单"
        placeholder="点击选择订单"
        input-align="left"
        :rules="[{ required: true, message: '请选择订单' }]"
        @click="doShowOrder"
      />
      <van-row v-if="orderInfo.id">
        <van-cell-group title="订单信息" inset>
          <van-cell>
            <template #title>
              <span>{{ orderInfo.productName }}</span>
            </template>
            <template #default>
              <span>{{ orderInfo.quantity }}{{ orderInfo.unit }}</span>
            </template>
          </van-cell>
          <van-cell title="总金额" :value="orderInfo.amount">
            <template #label>
              <span>已付款{{ orderInfo.paidAmount }}</span>
            </template>
          </van-cell>
          <van-cell title="剩余待付款" :value="orderInfo.remainingAmount">
            <template #default>
              <span class="red">{{ orderInfo.remainingAmount }}</span>
            </template>
          </van-cell>
        </van-cell-group>
        <van-field
          v-model="submitForm.amount"
          name="amount"
          label="收款金额"
          type="number"
          placeholder="请输入收款金额"
          input-align="left"
        />
        <van-field
          v-model="submitForm.remark"
          rows="2"
          autosize
          input-align="left"
          label="备注"
          type="textarea"
          maxlength="100"
          show-word-limit
          placeholder="备注"
        />
      </van-row>
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div v-if="showCustomer">
      <select-customer ref="selectCustomer" :visible="showCustomer" @close="handleCloseCustomer" />
    </div>
    <div v-if="showOrder">
      <select-order ref="selectOrder" :visible="showOrder" @close="handleCloseOrder" />
    </div>
    <van-calendar v-model="showReceiptDate" :min-date="minDate" :show-confirm="false" @confirm="onConfirmReceiptDate" />
  </div>
</template>

<script>
import DictSelect from '@/components/dictSelect.vue'
import SelectCustomer from '@/components/modules/selectCustomer.vue'
import SelectOrder from '@/components/modules/selectOrder.vue'
import { saveReceipt, selectReceiptById, updateReceiptById } from '@/api/receipt'
import { Toast } from 'vant'
import moment from 'moment'
import Moment from 'moment/moment'
import { selectSaleOrderById } from '@/api/saleOrder'

export default {
  name: 'ReceiptSubmitModule',
  components: { SelectOrder, SelectCustomer, DictSelect },
  data() {
    return {
      showReceiptDate: false,
      showCustomer: false,
      showOrder: false,
      title: '',
      submitForm: {},
      orderInfo: {},
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.title = '修改收款信息'
      if (!id) {
        this.title = '新增收款信息'
        return
      }
      selectReceiptById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    initOrder(orderId) {
      selectSaleOrderById(orderId).then(resp => {
        if (resp.success) {
          this.orderInfo = resp.data
          this.orderInfo.unit = resp.data.productInfo.unit
        }
      })
    },
    resetForm() {
      this.orderInfo = {}
      this.submitForm = {
        id: '',
        receiptNo: '',
        receiptDate: '',
        customerName: '',
        receiptMethod: '',
        orderNo: '',
        amount: '',
        remark: ''
      }
    },
    doSubmit() {
      if (this.submitForm.orderId === '') {
        Toast.fail('请选择订单')
        return
      }
      let request = saveReceipt
      if (this.submitForm.id) {
        request = updateReceiptById
      }
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.$emit('close')
        }
      })
    },
    handleChangePaymentMethod(val) {
      this.submitForm.receiptMethod = val
    },
    doShowOrder() {
      if (this.submitForm.customerId === '') {
        Toast.fail('请先选择客户')
        return
      }
      this.showOrder = true
      this.$nextTick(() => {
        this.$refs.selectOrder.handleSearch(
          { customerId: this.submitForm.customerId,
            paymentStateList: ['0', '1'],
            orderStateList: ['0', '1', '2']
          })
      })
    },
    onConfirmReceiptDate(row) {
      this.submitForm.receiptDate = Moment(row).format('YYYY-MM-DD')
      this.showReceiptDate = false
    },
    handleCloseCustomer(row) {
      this.showCustomer = false
      if (row) {
        this.submitForm.customerId = row.id
        this.submitForm.customerName = row.customerName
      }
    },
    handleCloseOrder(row) {
      this.showOrder = false
      if (row) {
        this.orderInfo = row
        this.submitForm.orderId = row.id
        this.submitForm.orderNo = row.orderNo
        this.orderInfo.unit = row.productInfo.unit
      }
    },
    getContainer() {
      return document.body
    },
    checkNumberGreaterThanZero(value) {
      return value > 0
    }
  }
}
</script>

<style scoped>

</style>
